<template lang="">
  <div class="regist_container">
    <div class="regist_box">
      <h2>在线教育管理系统</h2>
      <el-form  ref="formRef" label-width="80px" :model="ruleForm" :rules="rules" status-icon>
        <el-form-item prop="name">
          <!-- 利用具名插槽改变label样式 -->
          <template slot="label">
            <span style="color:white;">用户名</span>
          </template>
          <el-input  v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <template slot="label">
            <span style="color:white;">邮箱</span>
          </template>
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <template slot="label">
            <span style="color:white;">密码</span>
          </template>
          <el-input  type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item prop="password2">
          <template slot="label">
            <span style="color:white;">确认密码</span>
          </template>
          <el-input  type="password" v-model="ruleForm.password2"></el-input>
        </el-form-item>
        <el-form-item prop="identity">
          <template slot="label">
            <span style="color:white;">身份</span>
          </template>
          <el-select placeholder="请选择身份" v-model="ruleForm.identity">
            <el-option label="管理员" value="管理员">管理员</el-option>
            <el-option label="普通员工" value="普通员工">普通员工</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="regist">注册</el-button>
        </el-form-item>
      </el-form>
      
    </div>
  </div>
</template>
<script>
export default {
  name: "Regist",
  data() {
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };

    //回调函数，写箭头函数，可以拿到组件实例VueComponent (VC)
    var validatePassword2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };


    return {
      ruleForm: {
        name: "",
        email: "",
        passowrd: "",
        password2: "",
        identity: ""
      },
      //表单验证规则
      rules: {
        name: [
          { required: true, message: "请填写用户名", trigger: ['blur'] },
          { min: 5, max: 30, message: "字符长度在5-30之间", trigger: ['blur'] }
        ],
        email: [
          { required: true, message: "请填写邮箱", trigger: ['blur'] },
          { type: "email", message: "邮箱格式不正确", trigger: ['blur'] }
        ],
        passowrd: [
          { validator: validatePassword, trigger: 'blur' }
        ],
        password2: [
          { validator: validatePassword2, trigger: 'blur' }
        ],
        identity: [
          { required: true, message: "请选择身份", trigger: "change" }
        ]

      }
    }
  },
  methods: {
    //注册用户
    regist() {
      //1.验证表单
      this.$refs.formRef.validate(async valid => {
        if (!valid) return $this.message.error("表单验证错误")
        //2.请求接口
        let result = await this.$http({
          url: "/api/users/register",
          method: "POST",
          data: this.ruleForm
        }).catch(err => err)
        if (result.status == 200) {
          this.$message.success("成功注册用户")
          this.$router.push("/login")
        }

      })


    }
  }

}
</script>
<style lang="less">
.regist_container {
  background: #2d3a4b;
  height: 100%;
}

.regist_box {
  width: 450px;
  // height: 300px;
  // border: 1px solid #000;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  h2 {
    color: white;
    text-align: center;
  }

  .el-button {
    width: 100%;

  }
}
</style>